<template>
  <div class="table-page">
    <ul class="list">
      <li class="fx-js-ac">
        <div class="index-num">序列号</div>
        <div class="poster-img">海报</div>
        <div class="news-name">名称</div>
        <div class="news-cont center">内容</div>
        <div class="index-num">创建时间</div>
        <div class="index-num">浏览次数</div>
      </li>
      <li class="fx-js-ac" v-for="item of dataList" :key="item.id" @click="detailNews(item)">
        <div class="index-num">{{item.id}}</div>
        <div class="poster-img">
          <img class="border" :src='item.image' alt="">
        </div>
        <div class="news-name">{{item.title}}</div>
        <!-- <div class="news-cont" v-html="item.info"></div> -->
        <div class="news-cont">这里是文章简介</div>
        <div class="index-num">{{item.update_time}}</div>
        <div class="index-num">{{item.views}}</div>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  props: {
    dataList: Array,
  },
  mounted() {
    setTimeout(() => {
      // eslint-disable-next-line
      console.log("this.dataList", this.dataList);
    }, 2000);
  },
  methods: {
    detailNews(item) {
      this.$emit('detailNews', item);
    },
  },
};
</script>
<style lang="scss" scoped>
.table-page,
.list {
  width: 100%;
  min-height: 500px;
}
.list > li {
  width: 100%;
  min-height: 60px;
  margin: 20px 0;
  border: 1px solid #ccc;
  cursor: pointer;
  &:hover{
    background-color: #D1EEEE;
  }
 &:first-child:hover{
  background-color: #fff;
  }
}
.index-num, .news-name{
  width: 100px;
  text-align: center;
}
.news-name{
  width: 300px;
}
.poster-img{
  width: 100px;
  text-align: center;
  & > img {
    display: inline-block;
    width: 50px;
    height: 50px;
    margin:5px;
  }
}
.news-cont{
  width: 500px;
  overflow: hidden;
}
</style>
